<template>
  <el-card>
    <el-tree
      show-checkbox
      node-key="id"
      :data="assignList"
      :props="defaultProps"
      :default-expanded-keys="assignListIds"
      :default-checked-keys="selIds"

      ref="treeRef"
    >

    </el-tree>
    <el-button type="primary" @click="onSave">保存</el-button>
    <el-button @click="cancel">取消</el-button>
  </el-card>
</template>

<script>
import {mapActions,mapState} from 'vuex'
export default {
    name: "",
    data(){
      return {
        id:'',
        roleName : '',
        defaultProps:{
          children:'children',
          label:'name'
        },
      }
    },
    methods:{
      ...mapActions('aclRole',['getAssign','doAssign']),
      onSave(){
        const allCheckIds = this.$refs.treeRef.getCheckedKeys()
        const allHaltCheckIds = this.$refs.treeRef.getHalfCheckedKeys()
        
        const permissionIds = allCheckIds.concat(allHaltCheckIds).join(',')

        this.doAssign({
          roleId:this.id,
          permissionId:permissionIds,
        })

        this.cancel()
      },
      cancel(){
        this.$router.back()
      }
    },
    computed:{
      ...mapState({
        assignList:state => state.aclRole.assignList,
        assignListIds:state => state.aclRole.assignListIds,
        selIds:state => state.aclRole.selIds,
      })
    },
    mounted(){
      this.id = this.$route.params.id
      this.roleName = this.$route.params.roleName
      this.getAssign(this.id)
    }
}
</script>

<style scoped>

</style>